<template>
  <v-overlay persistent>
    <div class="result-dialog" v-if="skinData" :class="{success: result}">
      <i class="el-icon-close" @click="handleClose" v-if="!loading"></i>
      <div class="result-dialog-title">- {{result ? '升级成功' : '获得保底饰品'}} -</div>

      <div class="skin-item">
        <div class="skin-item-image">
          <img :src="skinData.image_url" class="skin-image" />
          <img
            src="@/static/img/top/pop_successed_star.png"
            class="pop_successed_star"
          />
        </div>

        <div class="skin-name">{{ skinData.short_name }}</div>

        <div class="skin-price">
          {{ skinData.price }}
          <img src="@/static/img/icon/diamond.png" class="diamond" />
        </div>

        <div class="text-white mt-3" style="font-size: 15px">
          落点值：{{point}}
        </div>
      </div>

      <div class="result-dialog-buttons">
        <v-btn color="primary" :disabled="loading" @click="sell"
          >出售({{ skinData.price }}<img src="@/static/img/icon/diamond.png" width="14" height="14" />)</v-btn
        >
        <v-btn
          color="primary"
          style="margin-left: 29px"
          @click="handleClose"
          :disabled="loading"
          >存入背包</v-btn
        >
      </div>
    </div>
  </v-overlay>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import type { PropType } from "vue";
import type { SkinItem } from "../index.vue";
import { BackpackService } from "@/services/BackpackService";
import { ElMessage } from "element-plus";
import { useStore } from "@/store";

export default defineComponent({
  setup(props, { emit }) {
    const loading = ref(false);
    const close = () => emit("close");
		const store = useStore();

		const comfortSkin = computed(() => store.getters.comfortSkin);

		const skinData = computed(() => {
			return props.result ? props.skin : comfortSkin.value;
		})

    return {
      loading,
			skinData,

      handleClose: close,
      sell() {
        loading.value = true;
        BackpackService.sell({
          id: props.backpackId,
        })
          .then((response) => {
            if (response.data.code === 0) {
              ElMessage.success("已出售");
							store.dispatch("getUserInfo")
							close();
            }
          })
          .finally(() => (loading.value = false));
      },
    };
  },

  props: {
    skin: {
      type: Object as PropType<SkinItem>,
      default: () => null,
    },
		result: {
			type: Boolean,
			default: false,
		},
		backpackId: {
			type: Number,
			default: -1,
		},
    point: {
      type: Number,
    }
  },
});
</script>

<style scoped lang="scss">
.result-dialog {
  width: 502px;
  height: 551px;
  background-image: url(@/static/img/top/pop.png);
  overflow: hidden;
  position: relative;
  max-width: 100vw;
  background-size: 100% 100%;

  &.success {
    background-image: url(@/static/img/top/pop_successed.png);
  }

  .el-icon-close {
    font-size: 33px;
    color: #fff;
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
  }

  .result-dialog-title {
    font-size: 23px;
    color: #fff;
    text-align: center;
    margin-top: 100px;
  }

  .skin-item {
    text-align: center;
    margin-top: 36px;

    .skin-item-image {
      position: relative;

      .skin-image {
        width: 180px;
      }

      .pop_successed_star {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 187px;
        height: 177px;
      }
    }

    .skin-name {
      color: #fff;
      font-size: 16px;
      margin-top: 22px;
    }

    .skin-price {
      font-size: 14px;
      margin-top: 10px;
      color: #ffc684;
      display: flex;
      justify-content: center;
      align-content: center;

      .diamond {
        width: 18px;
        height: 18px;
        margin-left: 3px;
      }
    }
  }

  .result-dialog-buttons {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 56px;
  }
}
</style>
